@charset "utf-8";
@import (reference) "base.less";  
body,html,.bg{height: 100%; .pr;}
img {max-width: 100% }
.mod-box{ 
    width: 100%;  background: url(../images/vr/bg.jpg) no-repeat 0 0 #39cd6f; 
    background-size: 100% auto;padding-bottom: 10px;min-height: 100%;
}
.img-box{ 
    .ac; .pr;
    height: 45%;
    img { margin-top: 26%; width: 35%; }
    p {
        width: 80%; position: absolute; left: 7%; background: #fff; padding:3%;z-index: 3;
        .roundedCorners(@radius:10px);.al;top: 10px;.f14;
        &:after {
            .pc; width:50px; height:59px; background: url(../images/vr/moon.png) no-repeat 0 0;
            right: 20px; bottom: -20px;z-index:-1;
        }
    }
}

.footer-img {width: 60%; .db;margin:15px 20%;}
.a-list {
    .ac;
    a {
        .dib;.vm; width: 277px; height: 105px; .ac;line-height: 90px;font-size: 32px;color: #fff;
        background: url(../images/vr/btn.png) no-repeat center  center ;.scale(@scale:0.5);
        margin: -5% -60px;
    }
    .red {
        background: url(../images/vr/btn-red.png) no-repeat center  center ;
        background-size: 100% 100%;
    }

}
.rank-list {
    background: #ebfaf0; width: 90%; margin-left: 5%; margin-top: 15px;
    .roundedCorners(@radius:10px);
    dt{.ar; padding: 10px;}
    dd{
        height: 36px; padding: 10px;
         img {width: 36px; height: 36px;  .roundedCorners(@radius:18px);margin-right: 10px;}
         *{.dib; .vm; }
         span{line-height: 36px;font-size: 14px;}
         .num {width:60px; float: right; .ar;}
    }
    dd:nth-child(2n){background: #d6f6e6; }
    dd:last-child{.roundedCorners(@radius:0 0 10px 10px);}
}

.rank-box {
    width: 100%; min-height: 100%;
    background:-webkit-gradient(linear, 0 0, 0 bottom, from(#a9eef4), to(#eafae0));  
}
.round-tab{
    .dis-b;.box-align(@align:center,@vertical:center); .p15;background: #d6f6e6;
    a{.db;.flex(@part:1);.ac; font-size: 14px;color: #71837a; }
    .on{ font-weight: bold;}
}
.best-list {
    margin: 5px;background: #ebfaf0;
    li{ padding:10px; color:#889e93;height: 30; line-height: 30px;}
    li:nth-child(2){border-top:3px solid #a3dabf;border-bottom:3px solid #a3dabf;}

    li:nth-child(4) .rank{ font-size: 15px; font-weight: bold; color: #f8b232; }
    li:nth-child(5) .rank{ font-size: 15px; font-weight: bold; color:#b7c7e8;}
    li:nth-child(3) .rank{ font-size: 15px; font-weight: bold;color:#fd7e27;}
    li:nth-child(2n){background: #def6ea; }
    li *{ .dib; .vm; }
    img { width: 30px; height: 30px;.roundedCorners(@radius:15px);margin: 0 10px;  }
    .num{ float: right;}
    .name{ width: 60%; .omit; }

}
.best-pet {
    span {.omit;.mr10;}
    span:nth-child(1){width: 5%;}
    span:nth-child(2){width: 35%;}
    span:nth-child(3){width: 30%;}
    span:nth-child(4){width: 15%; text-align: right;margin-right: 0;}
}
.best-city,.best-scenic{
    span{.omit;}
    span:nth-child(1){width: 5%;}
    span:nth-child(2){width: 35%;}
    span:nth-child(3){width: 35%;}
    span:nth-child(4){width: 20%; text-align: right;}
}
.best-city{
    li:nth-child(2) span:nth-child(1){ color:#fd7e27;font-weight: bold;}
    li:nth-child(3) span:nth-child(1){ color:#f8b232;}
    li:nth-child(4) span:nth-child(1){color:#b7c7e8;}
    li:nth-child(5) span:nth-child(1){font-size: 12px; color:#889e93;}
}
.best-scenic{
    span:nth-child(4){text-align: left;}
}

.best-city li:nth-child(2){border: 0;}
.gift-box {
    top: 20%;.pa;
    img {width: 55%;.db; margin:0 auto -11%;}
    .title{
        width: 78%; height: 50px; line-height: 50px; .ac; color: #fff; font-size: 18px; background: #39cd97;
        margin: 0 auto;.roundedCorners(@radius:15px);
    }
    .text-box {
        margin: 0 auto;padding: 15px;
        width: 60%;.roundedCorners(@radius:0 0 15px 15px);
        background: #edfff6; font-size: 14px; line-height: 20px; border-top:5px solid #d5e5dd;
    }

}
.envelop-box{
    top: 20%;.pa;width: 100%;

    .envelop-min{ 
        width:280px; height:150px; margin: 0 auto; .pr;
        &:before{
            .pc; width: 100%; height: 88%; left: 0;bottom: 0; z-index: 20;
            background: url(../images/vr/szz.png);background-size: 100% 100%;
        }
    }
    .cover-di{ background: #b07c58; width: 100%; height: 100%;.pr; z-index: 1;}
    // .cover-left{
    //     position: absolute;left: 0; bottom: 0;z-index: 5;
    //     width:0px;height:0px;overflow:hidden;
    //     border-bottom: 150px solid #b69162;
    //     border-right: 270px solid transparent;
    // }
    // .cover-right{
    //     border-bottom: 150px solid #b38b61;z-index:4;position: absolute;right: 0; bottom: 0;
    //     border-left: 270px solid transparent;
    // }
    .cover-body {
        background: url(../images/vr/szz.png) no-repeat;
        background-size: 100% 100%; 
    }
    .cover-gai{
        background: #825c34; position: absolute;left: 0; top:2px;z-index: 2;.roundedCorners(@radius:10px);
        // border-left: 145px solid transparent;
        // border-right: 136px solid transparent;
        // border-top: 83px solid #996f44;
        width: 100%; height: 100%; 
         background: url(../images/vr/xint.png) no-repeat;
         background-size: 100% auto; 
           
    }
    
    .cover-paper{
        background:url(../images/vr/bg1.png); font-size: 14px; position: absolute;left:9%; bottom: 0;
        background-size: 100% auto;height: 0;width: 84%;display: none;
        transform-origin: 0 100% 0;
        .ac; font-size: 20px; color: #ae9270; line-height: 50px; letter-spacing: 5px;
        // text-shadow:1px 1px 1px #fff,-1px -1px 1px #fff,-1px 1px 1px #fff,1px -1px 1px #fff;
    }
    h4{.f16;}
    .seal {
        .pa; width:99px; height: 112px; z-index: 20; background: url(../images/vr/sz.png) no-repeat; 
        left: 50%; top:50%; margin: -56px 0 0 -50px; 
    }
    .seal-icon { -webkit-animation: icon 0.5s 1 forwards;}
    .open-gai{
        -webkit-perspective:600; 
        -webkit-transform-style:preserve-3d; 
        -webkit-animation-name:open; 
        -webkit-animation-duration:1s; 
        -webkit-animation-iteration-count:1; 
        -webkit-animation-timing-function:linear;
        -webkit-animation-fill-mode: forwards;
        -webkit-transform-origin: 0 0;
        animation-delay:0.7;
    }
    .open-paper {
       -webkit-animation: paper 1s 1 forwards; animation-delay:1;
       display: block;
    }
    // 信纸
}
@-webkit-keyframes open {
    0% {
    -webkit-transform: rotatex(0deg);
    top: -4px;
  }
  50% {
    -webkit-transform: rotatex(90deg);
    top: 0px;
    z-index: -1;
  }
  100% {
    -webkit-transform: rotatex(180deg);
    top: 8px;
    z-index: -1;
  }
}
@-webkit-keyframes icon {
    0% {
    -webkit-transform: rotatex(0deg);
    .scale(@scale:1);
}
  50% {
    -webkit-transform: rotatex(90deg);
    .scale(@scale:1.5);
    opacity:0.5;
  }
  100% {
    -webkit-transform: rotatex(180deg);
    .scale(@scale:2);
    opacity:0;
  }
}
@-webkit-keyframes paper {
    0% {
        opacity:0;.db;
        height: 50px;
        z-index: 3;
    }
  50% {
    opacity:0.5;.db;
    height: 100px;
    z-index: 3;
  }
  100% {
    opacity:1;.db;bottom: 20px;
    height: 160px;
    z-index: 3;

  }
}
.card-box {
    min-height: 100%;padding:0 15px;.dwb;.box-align(@align:center,@vertical:center);
    overflow-x: hidden;
    background: url(../images/vr/shan.png) no-repeat center bottom,url(../images/vr/bg.jpg) 0 0;
    background-size: 100% auto,100% 100%;
    background-color:#54d281;
    i{position: absolute;}
    // .left {left: -60%; right: auto; bottom:0%; -webkit-transform: rotatey(180deg) scale(0.7);}
    .footer-img {position: absolute; bottom: 10px;}
}

.card{
    // margin: 30px auto; 
    border: 3px solid #fff; .roundedCorners(@radius:10px);
    // background: url(../images/vr/paper3.png) #fcf8f0;
    background-size: 100% 100%;
    .img-title{.pr;z-index: 8;}
    .feng { 
        width: 20%; position: absolute; left:20%;top: 3%;height: 80%;
        .body {
            width: 100%;height: 100%; position: relative;z-index: 2;display: block;
            background: url(../images/vr/bird-body.png) no-repeat 0 0;
            background-size: 100% auto;
            -webkit-animation: openEye 5s infinite ; 
            }
        .body-left,.body-right {
            position: absolute; top:64%;z-index:1;width: 40%;
            -webkit-perspective:600; 
            -webkit-transform-style:preserve-3d; 
            -webkit-animation-duration:1s; 
            -webkit-animation-iteration-count:infinite; 
            -webkit-animation-timing-function:linear;
            -webkit-animation-fill-mode: forwards;
            animation-direction:alternate;
        }
        .body-right{
            right: 0;
            -webkit-animation-name:wingRight; 
            -webkit-transform-origin: 0 50%;
            animation-delay:0.7;
        }
        .body-left{
            -webkit-animation-name:wingLeft; 
            -webkit-transform-origin:100% 50%;
            animation-delay:0.7;
        }
    }
    .zhum { 
        padding:20px 10px;.ar;
        span{.db;}
    }
}
.yuns {
     width:55%;right: 5%; position: absolute; top: -10%;
     img{.pr; z-index: 15;}
     i{.pa; width: 2px; height:82%; background:#fff;top: 45%;left:14%; z-index: 1; }
}
.yuns-left {
     width:35%; z-index: 8; left:-5%; position: absolute; bottom:28%;
    -moz-transform:scaleX(-1);
    -webkit-transform:scaleX(-1);
    -o-transform:scaleX(-1);
    transform:scaleX(-1);
    }
.yuns-right {
    width:30%; z-index: 5; right:-15%; position: absolute; top:70%;
}
.shu-left,.shu-right {position: absolute;z-index:10; }
.shu-left{
    width: 40%; bottom: 10%;left: -18%; 
    -moz-transform:scaleX(-1);
    -webkit-transform:scaleX(-1);
    -o-transform:scaleX(-1);
    transform:scaleX(-1);
}
.shu-right {width: 40%; top: 10%; right: -18%; }
.card-text{
    background: #fff;
    h4 {font-size: 16px; color: #7c4a4b; line-height: 30px;.mb10;}
    .p10; color: #a78c8c; font-size: 14px;line-height:25px;min-height: 240px;
   
    // -webkit-animation-delay:1;
    }
.unfold-paper{ -webkit-animation: unfoldPaper 1s 1 linear forwards;}
.qa-list {
    .p10; width: auto;
    dt{
        font-size: 14px; font-weight:600; padding:15px 0;color: #717f80;
        background: rgba(235,250,240,.5);text-indent: 5px;
    }
    dd{
        font-size: 12px; border-bottom:2px solid #ebfaf0; padding-bottom: 5px;background: #ebfaf0; .p10;
        color: #607d80; line-height: 23px;
    }
}
@-webkit-keyframes wingRight {
    0% {
       -webkit-transform:rotatey(0deg);
    }
    25%{
         -webkit-transform:rotatey(-45deg);
    }
    50% {
        -webkit-transform:rotatey(-80deg);
        z-index: 3;
    }
    75%{
        -webkit-transform:rotatey(-45deg);
        z-index: 3;
    }
    100% {
     -webkit-transform:rotatey(0deg);
     z-index: 3;
    }
}
// 有翅膀动画
@-webkit-keyframes wingLeft {
    0% {
       -webkit-transform:rotatey(0deg);
    }
    25%{
         -webkit-transform:rotatey(-45deg);
    }
    50% {
        -webkit-transform:rotatey(-80deg);
        z-index: 3;
    }
    75%{
        -webkit-transform:rotatey(-45deg);
        z-index: 3;
    }
    100% {
     -webkit-transform:rotatey(0deg);
     z-index: 3;
    }
}
// 左翅膀煽动
@-webkit-keyframes openEye {
    0% {
       background: url(../images/vr/bird-body.png) no-repeat center 0;
       background-size: auto 100%;
       // z-index: 3;
    }
    5%{
        background-image: url(../images/vr/bird-body-eye.png),url(../images/vr/bird-body.png);
        background-repeat: no-repeat,no-repeat;
        background-position:  center 0, center 0;
        background-size: auto 100%,auto 100%;
    }
    10%{
        background: url(../images/vr/bird-body.png) no-repeat center 0;
        background-size: auto 100%;
    }
    100% {
        background: url(../images/vr/bird-body.png) no-repeat center 0;
        background-size: auto 100%;
        z-index: 4;
    }
}

@-moz-keyframes openEye{
    0% {
       background: url(../images/vr/bird-body.png) no-repeat center 0;
       background-size: auto 100%;
       // z-index: 3;
    }
    5%{
        background:url(../images/vr/bird-body-eye.png) no-repeat center 0,url(../images/vr/bird-body.png) no-repeat center 0;
        background-size: auto 100%;
    }
    10%{
        background: url(../images/vr/bird-body.png) no-repeat center 0;
        background-size: auto 100%;
    }
    100% {
        background: url(../images/vr/bird-body.png) no-repeat center 0;
        background-size: auto 100%;
        z-index: 4;
    }
}
@-ms-keyframes  openEye{
     0% {
       background: url(../images/vr/bird-body.png) no-repeat center 0;
       background-size: auto 100%;
       // z-index: 3;
    }
    5%{
        background:url(../images/vr/bird-body-eye.png) no-repeat center 0,url(../images/vr/bird-body.png) no-repeat center 0;
        background-size: auto 100%;
    }
    10%{
        background: url(../images/vr/bird-body.png) no-repeat center 0;
        background-size: auto 100%;
    }
    100% {
        background: url(../images/vr/bird-body.png) no-repeat center 0;
        background-size: auto 100%;
        z-index: 4;
    }
}
@-o-keyframes  openEye{
    0% {
       background: url(../images/vr/bird-body.png) no-repeat center 0;
       background-size: auto 100%;
       // z-index: 3;
    }
    5%{
        background:url(../images/vr/bird-body-eye.png) no-repeat center 0,url(../images/vr/bird-body.png) no-repeat center 0;
        background-size: auto 100%;
    }
    10%{
        background: url(../images/vr/bird-body.png) no-repeat center 0;
        background-size: auto 100%;
    }
    100% {
        background: url(../images/vr/bird-body.png) no-repeat center 0;
        background-size: auto 100%;
        z-index: 4;
    }
}
@keyframes openEye{
    0% {
       background: url(../images/vr/bird-body.png) no-repeat center 0;
       background-size: auto 100%;
       // z-index: 3;
    }
    5%{
        background:url(../images/vr/bird-body-eye.png) no-repeat center 0,url(../images/vr/bird-body.png) no-repeat center 0;
        background-size: auto 100%;
    }
    10%{
        background: url(../images/vr/bird-body.png) no-repeat center 0;
        background-size: auto 100%;
    }
    100% {
        background: url(../images/vr/bird-body.png) no-repeat center 0;
        background-size: auto 100%;
        z-index: 4;
    }
}

// 眨眼睛
@-webkit-keyframes unfoldPaper {
    0% {
        background: url(../images/vr/paper1.png) no-repeat #fff;
        background-size: 100% auto;
    }
    50% {
        background: url(../images/vr/paper2.png) no-repeat #fff;
        background-size: 100% auto;
    }
    100% {
        background: url(../images/vr/paper3.png) no-repeat #fcf8f0;
        background-size: 100% 100%;
    }
}


// 贺卡展开
@-moz-keyframes unfoldPaper{
    0% {
        background: url(../images/vr/paper1.png) no-repeat #fff;
        background-size: 100% auto;
    }
    50% {
        background: url(../images/vr/paper2.png) no-repeat #fff;
        background-size: 100% auto;
    }
    100% {
        background: url(../images/vr/paper3.png) no-repeat #fcf8f0;
        background-size: 100% 100%;
    }
}
@-ms-keyframes  unfoldPaper{
     0% {
        background: url(../images/vr/paper1.png) no-repeat #fff;
        background-size: 100% auto;
    }
    50% {
        background: url(../images/vr/paper2.png) no-repeat #fff;
        background-size: 100% auto;
    }
    100% {
        background: url(../images/vr/paper3.png) no-repeat #fcf8f0;
        background-size: 100% 100%;
    }
}
@-o-keyframes  unfoldPaper{
    0% {
        background: url(../images/vr/paper1.png) no-repeat #fff;
        background-size: 100% auto;
    }
    50% {
        background: url(../images/vr/paper2.png) no-repeat #fff;
        background-size: 100% auto;
    }
    100% {
        background: url(../images/vr/paper3.png) no-repeat #fcf8f0;
        background-size: 100% 100%;
    }
}
@keyframes unfoldPaper{
     0% {
        background: url(../images/vr/paper1.png) no-repeat #fff;
        background-size: 100% auto;
    }
    50% {
        background: url(../images/vr/paper2.png) no-repeat #fff;
        background-size: 100% auto;
    }
    100% {
        background: url(../images/vr/paper3.png) no-repeat #fcf8f0;
        background-size: 100% 100%;
    }
}

